    var i = 0;//现在正在显示第几张图片，从0开始
    var liwidth = 1000;//每个li的固定宽度
    var duration = 500; //每次轮播动画持续的时间
    var licount = 4;//li的总个数
    // 要移动的ul
    var ulimgs = document.getElementById("ul-imgs")
    // console.log(ulimgs)
    // 包含小圆点列表的ul
    var ulIdxs = document.querySelector(".ul-idxs")
    // 小圆点的元素列表
    var lis = ulIdxs.children;
    // 从当前位置移动到任意一个范围的位置
    function moveTo(to) {
        // 如果用户没有传入要调到第几张图，就默认调到当前图的下一张
        if (to == undefined) {
            to = i + 1;
        }
        if (i == 0) {
            if (to > i) {//如果要看到当前位置右边的图片，是不会出问题的
                ulimgs.className = "transition";
            } else {//只有i=0在开头，且还要看左边的图片时，才会出问题
                // 为了避免用户再次看到偷梁换柱的效果，先把transition class去掉
                ulimgs.className = "";
                // 将ulImgs拉倒左侧
                ulimgs.style.margin = -liwidth * licount + "px";
                // 定时器是为了将偷梁换柱操作和加回transition属性的操作讲强行隔离开
                setTimeout(function () {
                    moveTo(licount - 1)
                }, 100);
                return;
            }
        }
        i = to;//现将表示第几张图片的变量i变为目标位置
        // 再用i计算ulimgs的marginLeft距离
        ulimgs.style.marginLeft = i * liwidth + "px";
        // 先删除所有小圆点的class
        for (var li of lis) {
            li.className = "";
        }
        console.log(i)
        if (i == licount) {
            i = 0;
            // 当transition动画播放播放完之后，才
            setTimeout(function () {
                ulimgs.className = "";//清除掉transition属性
                ulimgs.style.marginLeft = 0;//将ulIimgs拉回到0位置
            }, duration)
            // 再给当前位置的小圆点调你家class active
            lis[i].className = "active";
        }
    }
